import React, {
    Fragment,
    PureComponent
} from 'react';

import {
    StatusBar,
    StyleSheet,
    ActivityIndicator
} from 'react-native';

import Modal from 'react-native-modal';
import ImageViewer from 'react-native-image-zoom-viewer';

interface State {
    index:number,
    show: boolean,
    urls: Array<string>
}

class Viewer extends PureComponent<any, State> {
    state = {
        urls: [],
        show: false,
        index:0
    }

    get urls() {
        const {
            urls
        } = this.state;
        return urls.map(url => {
            return {
                url: url
            }
        })
    }

    public open = (urls: Array<string>,index:number=0) => {
        this.setState({
            urls: urls,
            show: true,
            index:index
        })
    }

    public close = () => {
        this.setState({
            show: false
        })
    }

    public _loadingRender = () => {
        return (
            <ActivityIndicator
                size="large"
            />
        )
    }

    render() {
        const {
            show,
            index
        } = this.state;
        return (
            <Modal
                isVisible={show}
                animationIn="zoomIn"
                animationOut="zoomOut"
                style={styles.container}
                onBackButtonPress={this.close}
                hideModalContentWhileAnimating={true}
            >
                <Fragment>
                    <StatusBar
                        backgroundColor="#000"
                    />
                    <ImageViewer
                        index={index}
                        flipThreshold={15}
                        pageAnimateTime={300}
                        enablePreload={true}
                        onClick={this.close}
                        imageUrls={this.urls}
                        saveToLocalByLongPress={false}
                        loadingRender={this._loadingRender}
                    />
                </Fragment>
            </Modal>
        )
    }
}

export default Viewer;

const styles = StyleSheet.create({
    container: {
        margin: 0
    }
}) as any;